<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性 vertical-align
		     使用方法：1.用于表格中单元格垂直居中
		              2.用于行内元素以及行内块元素的垂直居中
					  【文本和图片垂直居中（对齐）效果】
					  对齐分为四种：①基线对齐、②顶部对齐
					               ③居中对齐、④底部对齐
						元素种类：块元素、行元素、行内块元素
						块元素特点：独占一行、设置宽高
						行元素特点：一行内显示、不设置宽高
						网页：元素之间嵌套生成
						行元素与块元素可以任意嵌套
						前提：设置宽高---行套块
						             ---块套块   √
									 ---块套行   √
	                    前提：一行内显示---行套块  √								 
									   ---块套块 ×
									   ---块套行 ×
									   ---行套行 √
									   
									   
		 -->     
       <style>
		    im g:nth-child(1){
			   /* vertical-align:baseline  默认基线对齐 */
			   vertical-align: baseline;
		   }
		   /* 问题：派生选择器，特点：找后代 p img */
		   i mg:nth-child(1){
			   /* vertical-align:baaseline  顶部对齐*/
			   vertical-align: top;
			   width: 500px;
			   height: 500px;
			   background: red;
		   }
		   img.top{
			   vertical-align: top;
		   }
		   img.middle{
			   vertical-align: middle;
		   }
		   img.bottom{
			   vertical-align: bottom;
		   }
	   </style>
	</head>
	<body>
		<!-- 需求结构：4个p、嵌套文字：  图片叫什么名字
		                        文字后加img，设定宽高：25~100px
								每个图片后面加：①基线对齐、②顶部对齐
					               ③居中对齐、④底部对齐
								
		 -->
		 <h1>文本与图片垂直属性</h1>
		 <p>崔三娘<img src="img/1.png"  alt="崔三娘" width="100px"
		  height="100px">基线对齐</p>
		 <p>顾清寒<img src="img/2.png"  alt="顾清寒" width="100px" 
		 height="100px">顶部对齐</p>
		 <p>武田信忠<img src="img/3.png"  alt="武田信忠" width="100px" 
		 height="100px">居中对齐</p>
		 <p>迦南<img src="img/4.png"  alt="迦南" width="100px"
		  height="100px">底部对齐</p>
		  <!-- css选择器--抓第一张图片 ......
		  思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		  错误原因：html结构不符合派生特点：p包含4个img
		           伪类选择器，4个img需要在一个p种
		  p img:nth-child(1)
		  
		  -->
	</body>
</html>